<html>
<body>
<script type="text/javascript" src="/zb/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<form action="/"  method="post">
    <h3 class="title">参赛人员照片：</h3>
    <div>
        <img class="preview" src="123" alt="">
        <button class="uploadImage" type="button" id="vote_pic">
            点击上传（建议上传800*600的png,jpg,或者gif格式图片）
        </button>
        <input type="hidden" name="vote_pic">
    </div>
    <button class="bbon" type="submit" id="submit">提交</button>
</form>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '${map.appid}', // 必填，公众号的唯一标识
        timestamp: '${map.timestamp}', // 必填，生成签名的时间戳
        nonceStr: '${map.noncestr}', // 必填，生成签名的随机串
        signature: '${map.signature}',// 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline',
            'onMenuShareQZone',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function () {
// 5.1 拍照、本地选图
        var images = {
            localId: [],
            serverId: []
        };

// 5.3 上传图片
        $(".uploadImage").click(function(){
            var that =$(this);
            images.localId = [];
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    if (images.localId.length == 0) {
                        alert('请先使用 chooseImage 接口选择图片');
                        return;
                    }
                    if(images.localId.length > 1) {
                        alert('目前仅支持单张图片上传,请重新上传');
                        images.localId = [];
                        return;
                    }
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    function upload() {
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {
                                i++;
                                that.siblings('img.preview').attr('src',images.localId[0]);
                                // alert('已上传：' + i + '/' + length);
                                images.serverId.push(res.serverId);
                                that.siblings('input[type=hidden]').val(images.serverId[0]);
                                // alert( that.siblings('input[type=hidden]').val());
                                if (i < length) {
                                    upload();
                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }
                    upload();
                }
            });
        });


        $("#submit").click(function(){
            $.ajax({
                type: 'post',
                url: $("form").attr('action')  ,
                data : $("form").serialize(),
                dataType: 'json',
                success : function(data){
                    if(data.status){
                        alert(data.info);
                        window.location.href = data.url;
                    }else{
                    }


                }
            });
            return false;
        })
    });
</script>
</body>
</html>